<template>
    <div class="order-list-container">
        <van-search
            v-model="keyword"
            show-action
            placeholder="请输入流程名称"
            @search="onSearch"
            >
            <template #action>
                <div @click="onSearch" class="search-btn">搜索</div >
            </template>
        </van-search>
        <div class="list-box" v-for="item of orderList" :key="item.index">
            <div class="title-box">
                <span class="title">{{item.title}}</span>
                <span class="iconfont iconarrow-down" v-if="showItems[item.index]" @click="dohidenItems(item.index)"></span>
                <span class="iconfont iconarrow-right" v-if="!showItems[item.index]" @click="doshowItems(item.index)"></span>
            </div>
            <div class="item-box" v-if="showItems[item.index]">
                <div class="item" v-for="item1 of item.itemlist" :key="item1.templateid" @click="order(item1.templateid,item1.name)">
                    <span class="iconfont" :class="item1.icon"></span>
                    <div class="name">{{ item1.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {Toast} from 'vant';
import myMixin from '@/mixins';
export default {
    name: 'OrderList',
    mixins: [
        myMixin
    ],
    data() {
        return {
            keyword:'',
            showItems:[],
            orderList: []
        }
    },
    mounted() {
        Toast.loading({
            message:'加载中...',
            duration:0
        });
        setTimeout(() => {
            Toast.clear();
            this.$axios.get('/order/list').then(response =>{
                this.orderList = response.data;
                for(let i = 0; i < this.orderList.length; i++) {
                    this.showItems.push(1);
                }
            });
        },500)
    },
    methods:{
        doshowItems(index) {
            this.$set(this.showItems,index,1);
        },
        dohidenItems(index) {
            this.$set(this.showItems,index,0);
        },
        onSearch() {
            Toast.loading({
                message:'加载中...',
                duration:0
            });
            setTimeout(() => {
                Toast.clear();
            },1000);
        },
        order(templateid,name) {
            this.$axios.post('/template/get',{templateid}).then(response => {
                let res = response.data;
                if(res.status !== 'success') {
                    Toast(res.message);
                    return;
                }
                this.$animatePush('/ordercreate/'+JSON.stringify(res.data));
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../../css/var.less';
.order-list-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top:40px;
    .list-box {
        background:#fff;
        padding:@space;
        margin: @space 0;
        .title-box {
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        .item-box {
            margin-top: 10px;
            display:flex;
            justify-content:flex-start;
            align-items:center;
            flex-wrap:wrap;
            .item {
                width:90px;
                height: 60px;
                margin-bottom: @space;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                .iconfont {
                    font-size:30px;
                    color:@color;
                }
                .name {
                    margin-top:5px;
                    font-size:14px;
                    color:#666;
                   
                }
            }
        }
    }
}

.van-search {
    .search-btn {
        padding:0 10px;
        font-size: 14px;
        color:#969799;
    }
}
</style>